<template>
  <!-- 添加商品 -->
  <div class="sr-container" style="margin:20px">
    <el-button type="primary" @click="handlerAddGood">添加商品</el-button>
    <!-- <p style="display:inline-block;margin-left:2%">总仓仓库总量{{numData.mainNum}}</p>
    <p style="display:inline-block;margin-left:2%">空调{{numData.airNum}}</p>
    <p style="display:inline-block;margin-left:2%">热水器{{numData.heaterNum}}</p> -->
    <!-- 总仓商品表 -->
    <div v-show="mainGoodForm.isShowMainList">
      <p style="display:inline-block;margin-top:2%">商品类型：</p>
      <el-select size="small" placeholder="全部" clearable class="filter-item" style="width:130px" v-model="mainGoodForm.goodType">
        <el-option v-for="item in mainGoodType" :key="item.catId" :label="item.catName" :value="item.catId" />
      </el-select>
      <el-input v-model="mainGoodForm.goodBrand" size="small" placeholder="商品品牌" style="width: 200px;margin-left:2%"
        class="filter-item" @keyup.enter.native="getMainList" />
      <el-input v-model="mainGoodForm.goodName" size="small" placeholder="商品名称" style="width: 200px;margin-left:2%"
        class="filter-item" @keyup.enter.native="getMainList" />
      <el-button size="small" class="filter-item" type="success" icon="el-icon-search" @click="getMainList">查询</el-button>
      <!-- 总仓商品table-可补货 -->
      <el-table :data="totalDataList" style="width: 100%;margin-top:15px" tooltip-effect="dark" border>
        <el-table-column type="index" min-width="50" label="序号" align="center"></el-table-column>
        <el-table-column label="商品编码" align="center" prop="proId"></el-table-column>
        <el-table-column label="商品" min-width="250px" align="center">
          <template slot-scope="scope">
            <div style="dispaly:table;margin:0 auto;height:100px;align-content: center">
              <el-image style="width: 100px; height: 100px;margin-right:10px;float:left" :src="scope.row.imageUrl" fit
                lazy></el-image>
              <div>
                <p align="left" style="margin-bottom:20px;">商品名称：{{ scope.row.infoName }}</p>
                <p align="left" style="margin-bottom:0px;">商品型号：{{ scope.row.proType }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品品牌" align="center" prop="brand">
          <template slot-scope="scope">
            <span>{{ scope.row.goodsBrand}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" align="center" prop="goodType">
          <template slot-scope="scope">
            <span>{{ scope.row.proCatName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" min-width="50px" align="center">
          <template slot-scope="{row}">
            <span>{{row.status=='1'?'上架': (row.status=='2'?'下架':'删除') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" min-width="50px" align="center">
          <template slot-scope="{row}">
            <span>{{row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="400px">
          <template slot-scope="{ row }">
            <el-button type="primary" size="small" plain @click="handlerTransfer(row)">进仓</el-button>
            <el-button type="warning" size="small" @click="handleoutExchange(row)">出仓</el-button>
            <el-button type="danger" plain size="small" @click="handleSeizure(row)">线下出货</el-button>
            <el-button type="success" size="small" @click="handlerReplenish(row)">补货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="mainGoodForm.total > 0" :total="mainGoodForm.total" :page.sync="mainGoodForm.pageNum"
        :limit.sync="mainGoodForm.pageSize" @pagination="getProInfoList" />
    </div>
    <!-- 添加商品 -->
    <el-dialog @close="loadPage" title="添加商品" :visible.sync="goodForm.isShowGoodDialog" width="80%" append-to-body>
      <div>
        <p style="display:inline-block;">商品类型：</p>
        <el-select size="small" placeholder="全部" clearable class="filter-item" style="width:130px" v-model="goodForm.goodType">
          <el-option v-for="item in mainGoodType" :key="item.catId" :label="item.catName" :value="item.catId" />
        </el-select>
        <el-input v-model="goodForm.goodsBrand" size="small" placeholder="商品品牌" style="width: 200px;margin-left:2%"
          class="filter-item" @keyup.enter.native="handleFilter" />
        <el-input v-model="goodForm.infoName" size="small" placeholder="商品名称" style="width: 200px;margin-left:2%" class="filter-item"
          @keyup.enter.native="handleFilter" />
        <!--根据addGoodForm.isAddOver 判断是查询的库存商品列表 or 已添加的商品商品列表 -->
        <el-button size="small" class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">查询</el-button>
      </div>
      <!-- 商品库存列表 -->
      <div style="padding-bottom:40px">
        <el-table ref="multipleTable" :data="addDataList" :row-key='getRowKeys' tooltip-effect="dark" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" :reserve-selection='true' min-width="55" align="center"></el-table-column>
          <el-table-column label="商品编码" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品" min-width="200px" align="center">
            <template slot-scope="scope">
              <div style="dispaly:table;text-align:center;margin:0 auto;">
                <el-image style="width:150px;height:100px;margin-right:10px;float:left;" :src="scope.row.imageUrl" fit
                  lazy></el-image>
                <div style="vertical-align:middle;display:table-cell;height:100px;">
                  <p align="left" style="margin-bottom:20px;">{{ scope.row.infoName }}</p>
                  <p align="left" style="margin-bottom:0px;">{{ scope.row.proType }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="销售价/市场价" min-width="200px" align="center">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.proPriceVosList" :key="index">销售价：{{ item.proSellPrice }} | 市场价：{{scope.row.proMarketPrices}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品品牌" width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.brandName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品类型" min-width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.catName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品状态" min-width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status=='1'?'上架': (scope.row.status=='2'?'下架':'删除') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="goodForm.total > 0" :total="goodForm.total" :page.sync="goodForm.pageNum" :limit.sync="goodForm.pageSize"
          @pagination="handlerAddGood" />
        <div slot="footer" style="float:right">
          <el-button type="primary" @click="submitGood">提交</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 补货的dialog -->
    <div>
      <el-dialog @close="loadPage" title="填写补货单" :visible.sync="replenishForm.isShowReplenish" width="30%" center append-to-body>
        <div>
          <p style="display:inline-block;">补货数量：</p>
          <el-input v-model="replenishForm.num" placeholder="请输入补货的数量" size="small"></el-input>
          <p style="display:inline-block;margin-top:15px">补货说明：</p>
          <el-input v-model="replenishForm.instruction" placeholder="请输入补货说明" size="small" :rows="6" type="textarea"></el-input>
        </div>
        <div slot="footer" style="width:100%">
          <el-button type="primary" @click="addbuhuo" style="align:center">提 交</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
        title="线下出货"
        :visible.sync="seizureShow"
        width="30%"
        center
        append-to-body
        :close-on-click-modal="false"
        @close="loadPage"
      >
        <div>
          <p style="display:inline-block;">线下出货数量：</p>
          <el-input v-model="Seizure.num" placeholder="请输入线下出货的数量" size="small"></el-input>
          <p style="display:inline-block;margin-top:15px">线下出货说明：</p>
          <el-input
            v-model="Seizure.instruction"
            placeholder="请输入线下出货说明"
            size="small"
            :rows="6"
            type="textarea"
          ></el-input>
        </div>
        <div slot="footer" style="width:100%">
          <el-button
            type="primary"
            @click="addSeizure"
            style="align:center"
          >提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="isTransferVisible"
        width="60%"
        append-to-body
        :close-on-click-modal="false"
      >
        <div>
          <div>
            <span style="margin-left:5px;">仓库：</span>
            <el-table :data="data1List" tooltip-effect="dark" ref="tableData" @row-click="singleElection" stripe border style="width:100%">
              <el-table-column prop="prop" label="单选" align="center">
                <template slot-scope="scope">
                  <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
                </template>
                 <!-- v-model="scope.row.id == transferForm.selectedId" -->
              </el-table-column>
              <el-table-column prop="name" label="省" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.province}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="市" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.city}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="县" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="id" label="该商品库存" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.amount}}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="listQuery.pageNum"
              :limit.sync="listQuery.pageSize"
              @pagination="handlerTransfer"
            />
          </div>

          <div style="margin-top:2%;display:flex;align:center">
            <span>调货数量：</span>
            <el-input
              v-model="transferForm.transferNum"
              placeholder="请输入调货数量"
              size="small"
              class="fliter-item"
              style="width:200px"
            ></el-input>
          </div>
          <div style="margin-top:2%;display:flex;align:center">
            <span>调货说明：</span>
            <el-input
              type="textarea"
              :rows="2"
              size="small"
              style="width:50%"
              placeholder="请输入内容"
              v-model="transferForm.transferDes"
            ></el-input>
          </div>
        </div>
        <div slot="footer">
          <el-button type="primary" @click="dialogStatus === 'In' ? addTiaohuo() : outTiaohuo()">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
  import {
    getProInfo,
    addProInfo,
    getProcatList
  } from '@/api/countyStorageReq'
  import {
    getshangpinList,
    addshangpinList,
    getMainStorage,
    seasoningCondiments,
    outExchange,
    buhuoList,
    getSeasoning,
    seizureList
  } from '@/api/mainStorage'
  import Pagination from "@/components/Pagination";
  const calendarTypeOptions = [{
      key: '737717c9-eb23-11e9-af14-7cd30ac0ab94',
      display_name: '热水器'
    },
    {
      key: '24c306ee-b1a9-11e9-9cf4-105bad763570',
      display_name: '空调'
    },
  ]
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})
  export default {
    inject: ["reload"],
    filters: {
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    components: {
      Pagination
    },
    props:{
      proInfo:{
        type:String,
        required:true
      },
    },
    watch: {
      proInfo:{  
        handler(val,oldval) {  
          console.log(val)
          this.newProInfo=val
          console.log(this.newProInfo)
          this.getProInfoList()
          this.getProcat()
        },  
        immediate:true,//关键
        deep:true
      },
    },
    data() {
      return {
        isTransferVisible:false,
        seizureShow:false,
        seizureTemp:{
          number:0,
          note:''
        },
        Seizure:{
          num: "",
          //扣货说明
          instruction: ""
        },
        linshi: [],
        multipleSelection: [],
        //添加商品-库存商品列表
        goodForm: {
          isShowGoodDialog: false,
          //添加商品的total
          pageNum: 1,
          pageSize: 10,
          goodType: "",
          goodsBrand: "",
          infoName: "",
          total: 0,
        },
        dialogStatus: '',
        textMap: {
          In: '调入仓',
          Out: '调出仓'
        },
        //已添加的商品列表
        calendarTypeOptions,
        transferForm: {
        //调货单选
          selectedId: 0,
          transferNum: 0,
          transferDes: ""
        },
        mainGoodForm: {
          isShowMainList: true,
          total: 0,
          pageNum: 1,
          pageSize: 10,
          goodType: "",
          goodBrand: "",
          goodName: ""
        },
        //添加商品后修改商品库存
        fixGoodForm: {
          goodType: "",
          goodBrand: "",
          goodName: "",
          //总仓库存编辑
          editNum: []
        },
        //补货弹窗内容
        replenishForm: {
          isShowReplenish: false,
          //补货数量
          num: "",
          //补货说明
          instruction: ""
        },
        //补货记录
        recordForm: {
          isShowRecord: false,
          //调货时间
          transferTime: [],
          total: 10,
          pageNum: 1,
          pageSize: 10
        },
        //顶部数量
        numData: {
          mainNum: 0,
          airNum: 0,
          heaterNum: 0
        },
        listQuery:{
          pageNum:1,
          pageSize:10
        },
        //仓库里商品列表
        dataList: [

        ],
        totalDataList: [],
        temp: {},
        newTemp: {
          number: 0,
          note: ''
        },
        addDataList: [],
        oldWarehouse:'',
        oldkucun:'',
        total:'',
        data1List:[],
        templateSelection:'',
        catId:'',
        proPriceId:'',
        proId:'',
        aCode:'',
        templateRadio:'',
        mainGoodType:null
      };
    },
    methods: {
      getProcat(){
        getProcatList().then(res=>{
          this.mainGoodType=res.data
        })
      },
      loadPage(){
        this.replenishForm.num=''
        this.replenishForm.instruction=''
        this.Seizure.num=''
        this.Seizure.instruction=''
        this.templateSelection=''
        this.transferForm.transferNum=0
        this.transferForm.transferDes=''
        this.$refs.multipleTable.clearSelection()
        this.goodForm.goodType=''
        this.goodForm.goodsBrand=''
        this.goodForm.infoName=''
        console.log(this.multipleSelection)
      },
      //获取总仓列表数据
      getMainList() {
        this.mainGoodForm.pageNum=1
        this.getProInfoList()
      },
      getRowKeys (row) {
        return row.id; // id为列表数据的唯一标识
      },
      handleoutExchange(row) {
        this.isTransferVisible = true;
        this.dialogStatus = 'Out'
        var params = Object.assign({}, row)
        this.oldWarehouse=row.storageId
        this.oldkucun=row.amount
        this.catId=row.catId
        this.proId=row.proId
        this.proPriceId=row.proPriceId
        this.$set(params,'pageSize',this.listQuery.pageSize)
        this.$set(params,'pageNum',this.listQuery.pageNum-1)
        getSeasoning(params).then(res=>{
          this.data1List=res.content
          this.total=res.totalElements
        })
      },
      handlerTransfer(row) {
        this.isTransferVisible = true;
        this.dialogStatus = 'In'
        var params={
          proId:row.proId,
          warehouseId:row.warehouseId
        }
        this.oldWarehouse=row.storageId
        this.oldkucun=row.amount
        this.$set(params,'pageSize',this.listQuery.pageSize)
        this.$set(params,'pageNum',this.listQuery.pageNum-1)
        getSeasoning(params).then(res=>{
          this.data1List=res.content
          this.total=res.totalElements
        })
      },
      singleElection (row) {
        this.templateSelection = this.data1List.indexOf(row);
        console.log(row)
        this.selectedList=row
        this.templateRadio = row.storagePropriceId;
        this.selectedkucun=row.amount
        this.aCode=row.warehouseId
        console.log(this.aCode)
      },
      outTiaohuo(){
        console.log(this.templateRadio)
        if(this.templateRadio==null){
          this.templateRadio=''
        }
        var newTemp={
          newStorageId:this.oldWarehouse,
          oldStorageId:this.templateRadio,
          oldProAmount:this.oldkucun,
          newProAmount:this.selectedkucun,
          exchangeAmount:Number(this.transferForm.transferNum),
          exchangeReason:this.transferForm.transferDes,
        }
        outExchange(newTemp).then(res=>{
          if(res.code==='200'){
            this.$notify({
              title: '成功',
              message: '调出货成功',
              type: 'success',
              duration: 2000
            })
            this.isTransferVisible = false;
          }else{
            this.$notify({
              title: '失败',
              message: '失败，请联系管理员',
              type: 'danger',
              duration: 2000
            })
          }
          this.getProInfoList()
          this.templateSelection=''
          this.transferForm.transferNum=0
          this.transferForm.transferDes=''
        })
      },
      addTiaohuo(){
        console.log(this.templateRadio)
        var newTemp={
          oldStorageId:this.oldWarehouse,
          newStorageId:this.templateRadio,
          oldProAmount:this.oldkucun,
          newProAmount:this.selectedkucun,
          exchangeAmount:Number(this.transferForm.transferNum),
          exchangeReason:this.transferForm.transferDes
        }
        seasoningCondiments(newTemp).then(res=>{
          if(res.code==='200'){
            this.$notify({
              title: '成功',
              message: '调入货成功',
              type: 'success',
              duration: 2000
            })
            this.isTransferVisible = false;
          }else{
            this.$notify({
              title: '失败',
              message: '失败，请联系管理员',
              type: 'danger',
              duration: 2000
            })
          }
          this.getProInfoList()
          this.templateSelection=''
          this.transferForm.transferNum=0
          this.transferForm.transferDes=''
        })
      },
      //展开dialog并请求商品列表
      handlerAddGood() {
        this.goodForm.isShowGoodDialog = true;
        var params = {
          pageNum: this.goodForm.pageNum,
          pageSize: this.goodForm.pageSize,
          catId: this.goodForm.goodType,
          goodsBrand: this.goodForm.goodsBrand,
          infoName: this.goodForm.infoName
        }
        getshangpinList(params).then(res => {
          this.addDataList = res.content
          this.goodForm.total = res.totalElements
        })
      },
      handleSeizure(row){
        this.seizureShow = true;
        this.seizureTemp = Object.assign({}, row)
        console.log(this.seizureTemp)
      },
      addSeizure(){
        this.seizureTemp.number=Number(this.Seizure.num)
        this.seizureTemp.note=this.Seizure.instruction
        seizureList(this.seizureTemp).then(res=>{
          console.log(res)
          if(res.code==='200'){
            this.$notify({
              title: '成功',
              message: '线下出货成功',
              type: 'success',
              duration: 2000
            })
            this.seizureShow = false;
          }else{
            this.$notify({
              title: '失败',
              message: '失败，请联系管理员',
              type: 'danger',
              duration: 2000
            })
          }
          this.getProInfoList()
          this.Seizure.num=''
          this.Seizure.instruction=''
        })
      },
      handleFilter() {
        this.goodForm.pageNum = 1
        this.handlerAddGood()
      },
      handleSelectionChange(val) {
        console.info(val)
        this.multipleSelection = val
      },
      getProInfoList(){
        console.log(this.newProInfo)
        var params={
          warehouseId:this.newProInfo,
          pageNum: this.mainGoodForm.pageNum-1,
          pageSize: this.mainGoodForm.pageSize,
          catId:this.mainGoodForm.goodType,
          goodsBrand:this.mainGoodForm.goodBrand,
          goodsName:this.mainGoodForm.goodName
        }
        getProInfo(params).then(res=>{
          this.totalDataList=res.content
          this.mainGoodForm.total=res.totalElements
        })
      },
      //请求捕获记录的数据
      //打开补货弹窗，处理补货提交
      handlerReplenish(row) {
        this.replenishForm.isShowReplenish = true;
        this.newTemp = Object.assign({}, row)
        console.log(this.newTemp)
      },
      addbuhuo() {
        this.newTemp.number = Number(this.replenishForm.num)
        this.newTemp.note = this.replenishForm.instruction
        buhuoList(this.newTemp).then(res => {
          console.log(res)
          if (res.code === '200') {
            this.$notify({
              title: '成功',
              message: '补货成功',
              type: 'success',
              duration: 2000
            })
            this.replenishForm.isShowReplenish = false;
          } else {
            this.$notify({
              title: '失败',
              message: '失败，请联系管理员',
              type: 'danger',
              duration: 2000
            })
          }
          this.getProInfoList()
          this.replenishForm.num=''
          this.replenishForm.instruction=''
        })
      },
      //提交商品库所选择商品
      submitGood() {
        //展示修改库存的表
        //隐藏添加商品的dialog
        console.log(this.newProInfo)
        var temp = {
          warehouseId:this.newProInfo,
          list:this.multipleSelection
        }
        addProInfo(temp).then(res=>{
          if(res.code==='200'){
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.goodForm.isShowGoodDialog = false;
            //隐藏总仓商品表
          }else{
            this.$notify({
              title: '失败',
              message: '失败，请联系管理员',
              type: 'danger',
              duration: 2000
            })
          }
          this.getProInfoList()
          this.$refs.multipleTable.clearSelection()
          this.goodForm.goodType=''
          this.goodForm.goodsBrand=''
          this.goodForm.infoName=''
        })
        // this.goodForm.isShowGoodDialog = false;
        // //隐藏总仓商品表
        // this.mainGoodForm.isShowMainList = false;
      },
      // getList() {
      //   var params = {
      //     pageNum: this.mainGoodForm.pageNum,
      //     pageSize: this.mainGoodForm.pageSize,
      //     catId: this.mainGoodForm.goodType,
      //     areaCode: '410000000000',
      //   }
      //   getMainStorage(params).then(res => {
      //     this.totalDataList = res.content
      //     this.mainGoodForm.total = res.totalElements
      //   })
      // },

      //添加商品之后进行商品库存操作
      //是否包含本项数据
      isHaveData(list, data) {
        let isHave = false;
        list.forEach(item => {
          if (item == data) {
            isHave = true;
          }
        });
        return isHave;
      },
      //提交编辑的库存数据
      submitEdit(scope) {
        let index = this.fixGoodForm.editNum.indexOf(scope.row.proId);
        this.fixGoodForm.editNum.splice(index, 1);
      },
      //要编辑的库存数量存放
      startEdit(row) {
        this.fixGoodForm.editNum.push(row.proId);
      }
    }
  };
</script>

<style>
</style>
